<template>
  <div class="header">
    <div class="domestic" :class= "{active: isActiveA}" @click="domestic">境内</div>
    <div class="foreign" :class= "{active: isActiveB}" @click="foreign">境外·港澳台</div>
  </div>
</template>

<script>
export default {
  name: 'CitySelected',
  data () {
    return {
      isActiveA: true,
      isActiveB: false
    }
  },
  methods: {
    domestic () {
      if (this.isActiveB) {
        this.isActiveB = !this.isActiveB
        this.isActiveA = !this.isActiveA
      }
    },
    foreign () {
      if (this.isActiveA) {
        this.isActiveA = !this.isActiveA
        this.isActiveB = !this.isActiveB
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header
    position: relative
    height: $headerHeight
    line-height $headerHeight
    background: $bgColor
    text-align: center
    color: #fff
    .domestic
      position: absolute
      float: left
      right: 50%
      top: 22%
      height: .5rem
      line-height: .5rem
      width: 35%
      border: .02rem solid #fff
    .active
      background: #fff
      color: $bgColor
    .foreign
      position: absolute
      float: left
      left: 50%
      top: 22%
      height: .5rem
      line-height: .5rem
      width: 35%
      border-top: .02rem solid #fff
      border-right: .02rem solid #fff
      border-bottom: .02rem solid #fff
</style>
